<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞牛影视 - 播放</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/utilities.css">
  <link rel="stylesheet" href="css/remixicon.min.css">
</head>
<body class="theme-dark">
  <div class="player-container" id="playerContainer">
    <!-- 播放器顶部控制栏 -->
    <div class="player-header" id="playerHeader">
      <div class="player-header-left">
        <button class="btn-icon" id="exitPlayer">
          <i class="ri-close-line"></i>
        </button>
        <h1 class="player-title" id="playerTitle">加载中...</h1>
      </div>
      <div class="player-header-right">
        <button class="btn-icon" id="episodeListToggle">
          <i class="ri-list-check"></i>
        </button>
      </div>
    </div>

    <!-- 视频播放器 -->
    <video id="videoPlayer" class="video-player" controls autoplay></video>

    <!-- 播放控制 -->
    <div class="player-controls" id="playerControls">
      <button class="btn-player" id="prevEpisode" disabled>
        <i class="ri-skip-back-line"></i>
      </button>
      <button class="btn-player" id="nextEpisode" disabled>
        <i class="ri-skip-forward-line"></i>
      </button>
    </div>

    <!-- 剧集列表侧边栏 -->
    <div class="episode-sidebar" id="episodeSidebar">
      <div class="episode-sidebar-header">
        <h2>选集</h2>
        <button class="btn-icon" id="closeSidebar">
          <i class="ri-close-line"></i>
        </button>
      </div>
      
      <div class="episode-sidebar-content">
        <div class="source-selector">
          <h3>播放源</h3>
          <div class="source-buttons" id="sourceButtons">
            <!-- 播放源按钮将通过JS动态生成 -->
          </div>
        </div>
        
        <div class="episode-selector">
          <h3>剧集</h3>
          <div class="episode-grid" id="episodeGrid">
            <!-- 剧集按钮将通过JS动态生成 -->
          </div>
        </div>
      </div>
    </div>

    <!-- 剧集列表遮罩 -->
    <div class="episode-sidebar-overlay" id="sidebarOverlay"></div>
  </div>

  <!-- 脚本 -->
  <script src="js/config.js"></script>
  <script src="js/api.js"></script>
  <script src="js/player.js"></script>
</body>
</html>
